<template>
  <div class="introduction">
    <CardBox title="科普场馆介绍"></CardBox>
    <div class="box">
      <div class="title">
        <img src="@/assets/img/display-center-015.png" alt="" />
        <span v-show="scienceId === 'xinjian01' || !scienceId">植物楼</span>
        <span v-show="scienceId === 'haipai04'">黄母祠</span>
        <span v-show="scienceId === 'guonei02'">上海盆景博物馆</span>
        <span v-show="scienceId === 'xinjian02'">自然中心</span>
        <span v-show="scienceId === 'wenshi01'">展览温室</span>
        <span v-show="scienceId === 'haipai02'">兰室</span>
      </div>
      <div class="content" v-show="scienceId === 'xinjian01' || !scienceId">
        <div>
          <span>植物楼位于园中部南侧，系两层现代展览馆，混合结构，面积</span>
          <span class="highlight">4420 平方米</span>
          <span>。1980年7月开工建设，1983年7月完成主体建设。</span>
        </div>
        <div>
          <span>植物楼是上海植物园</span>
          <span class="highlight">最主要的科普设施场所</span>
          <span>，常年举办各类室内展览和报告会，取得了良好的社会反响。</span>
        </div>
        <div>
          <span
            >1984
            年，上海植物园与上海自然博物馆在植物楼内共同开设了一座大型植物科普馆，以普及植物进化</span
          >
          <span class="highlight">知识为主体，由图片、模型、标本等组成</span>
          <span>。开放以后，吸引了大量的学生、老师和生物爱好者。</span>
        </div>
      </div>
      <div class="content" v-show="scienceId === 'haipai04'">
        <div>
          黄母祠，又名先棉祠，是为纪念黄道婆传授纺织技术、造福乡里的功绩而建。现仅存龙华黄母村黄母祠，清雍正<span
            class="highlight"
            >六年（1728）年建</span
          >，在今上海植物园内。园内植<span class="highlight"
            >桑、麻、棉、竹</span
          >等，以突出纺织主题。
        </div>
        <div>
          黄母祠是为纪念元代纺织革新家黄道婆而修建的祠堂。经原地原样修复并多次改扩建，占地<span
            class="highlight"
            >0.42</span
          >
          公顷，建筑面积约
          <span class="highlight">546</span>
          平方米，由黄道婆纪念堂、陈列馆、展廊及游憩区组成，以<span
            class="highlight"
            >"先梯园""仰芳亭"和"上智舫"</span
          >为设计特色，是园内唯-一座以文物保护为特色的科普场馆。
        </div>
        <div>
          <span class="highlight">1987 年11月 17日</span
          >，上海市政府正式公布黄母祠为市级文物保护单位。留有<span
            class="highlight"
            >赵朴初、启功、谢稚柳</span
          >等名家题写的墨宝。
        </div>
      </div>
      <div class="content" v-show="scienceId === 'guonei02'">
        <div>
          <span
            >作为海派盆景的发源地，上海植物园盆景园早在龙华苗圃创立之初就收集并制作了大量盆景作品。盆景园于1978
            年正式对外开放，并于1996年正式建成上海盆景博物馆，是</span
          >
          <span class="highlight"
            >全国首家盆景博物馆，开启了国内盆景博物馆的先河。</span
          >
        </div>
        <div>
          <span>馆内常年举办各类盆景展览、活动:是重要的科普与交流空间。</span>
        </div>
      </div>
      <div class="content" v-show="scienceId === 'xinjian02'">
        <div>
          <span
            >位于植物园四号门的自然中心，是以城市生物多样性体验中心为载体，兼具</span
          >
          <span class="highlight"
            >生态展览、自然教育、园艺课堂和科普交流功能</span
          >
          <span>的复合空间。</span>
        </div>
        <div>
          <span
            >自然中心室内展示了上海生态之城的多重美学价值。其中城市生物多样性教育空间通过展陈中联动植物园的真实场景，向公众传达生物多样性的概念、保护意义与行动指引,为公众了解、感知、学习带来知识与情境多重的体验，也为公众参与城市生物多样性恢复提供教育和交流的平台。</span
          >
        </div>
      </div>
      <div class="content" v-show="scienceId === 'wenshi01'">
        <div>暂无内容</div>
      </div>
      <div class="content" v-show="scienceId === 'haipai02'">
        <div>暂无内容</div>
      </div>
    </div>
  </div>
</template>

<script>
import CardBox from "@/components/Global/CardBox.vue";
export default {
  components: {
    CardBox,
  },
  data() {
    return {
      scienceId: this.$route.query.scienceId,
    };
  },
  mounted() {
    this.scienceId = this.$route.query.scienceId;
  },
  watch: {
    "$route.query.scienceId": {
      handler(newScienceId) {
        // 当路由 query 中的 scienceId 变化时，更新组件的 scienceId
        this.scienceId = newScienceId;
        console.log("路由 scienceId 变化:", newScienceId);
      },
      immediate: true, // 立即执行一次，确保初始化时也能获取到值
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: url("@/assets/img/container-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 20px;
  height: 400px;
  .title {
    font-size: 24px;
    font-weight: bold;
    color: #07ffe5;
    img {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
  }
  .content {
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    padding: 0px 20px 10px;
    line-height: 30px;
    display: block;
    .highlight {
      color: #07ffe5;
    }
  }
}
</style>
